box-sizing

box-sizing은 요소의 크기(width, height)를 계산하는 방식을 결정하는 CSS 속성입니다.
기본 값은 content-box이며, border-box를 사용하면 레이아웃이 더 직관적으로 관리됩니다.

1️⃣ content-box vs border-box

🔹 예제 코드

.box-content {
  box-sizing: content-box; /* 기본값 */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* 실제 크기: 200px + 20px + 20px + 5px + 5px = 250px */

.box-border {
  box-sizing: border-box; /* 전체 크기 유지 */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}
/* 실제 크기: 200px (고정) */

✔️ content-box는 width가 콘텐츠만 포함하지만,
✔️ border-box는 width에 패딩과 보더까지 포함하여 예측 가능한 크기를 유지합니다.

2️⃣ box-sizing: border-box; 사용 추천

웹 개발에서는 border-box를 기본값으로 설정하는 것이 일반적입니다.
아래와 같이 CSS 초기 설정에서 적용하면 일관된 레이아웃을 유지할 수 있습니다.

* {
  box-sizing: border-box;
}

✔️ 모든 요소에 border-box 적용 → 레이아웃 유지 쉬움
✔️ margin은 여전히 별도로 계산됨